import React, { PureComponent } from 'react'
import { connect }  from 'react-redux' 
import {
  RecommdCover,
  RecommdPic,
  RecommdDown
} from '../style'

import { actionCreators } from '../store'

import download from '../static/download.png'






class Recommd extends PureComponent {
  getListArea(){
    const {isShow} = this.props
    if(isShow){
      return (
        <div className="download">
            <img src={download} alt="" />
        </div>
      )
    }else {
      return null
    }
  }
  render() {
    const { handlserMounseEnter, handlserMounseLeave} = this.props
    return (
      <RecommdCover>
        {
          this.props.list.map(item=>{
            return <RecommdPic imgUrl={item.get('imgUrl')} key={item.get("id")}></RecommdPic>
          })
        }
        {
          this.getListArea()
        }

        <RecommdDown 
          onMouseEnter= {handlserMounseEnter}
          onMouseLeave = {handlserMounseLeave}
        >
          <img src={download} alt= "" />
          <div className="downRight">
            <div className="title">下载简书APP  </div>
            <div className="desc">随时随地发现和创造内容</div>
          </div>
        </RecommdDown>
      </RecommdCover>
    )
  }
}


const mapState = (state)=>({
  isShow: state.getIn(['home', 'isShow']),
  list: state.getIn(['home','recommdPic'])
})

const mapDispath = (dispatch)=>({
  handlserMounseEnter(){
    dispatch(actionCreators.downloadShow())
  },
  handlserMounseLeave(){
    dispatch(actionCreators.downloadHide())
  }
})


export default connect(mapState,mapDispath )(Recommd)